<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文章新增</title>
    <#include "/header.html">
</head>
<style>
    .body-content {
        width: 1000px;
        overflow: auto;
        padding: 15px;
        color: rgba(0, 0, 0, 0.5);
    }

    .rrapp-input {
        border: 1px solid #cccccc;
        border-radius: 5px;
        padding-left: 10px;
        height: 30px;
        width: 304px;
    }

    .rrapp-but {
        border: 1px solid #cccccc;
        border-radius: 5px;
        height: 29px;
        width: 60px;
    }
    .rrapp-pp {
        border: 1px solid #cccccc;
        border-radius: 5px;
        height: 20px;
        width: 80px;
    }
    .rrapp-but:hover{
        color: black;
    }
    .inputRadio {
        height: 30px;
        line-height: 30px;
        width: 100%;
    }

    .inputRadio-items {
        position: relative;
        float: left;
        width: 80px;
        height: 100%;
    }

    .inputRadio-items input {
        position: absolute;
        left: 0px;
        top: 5px;
        cursor: pointer;
    }

    .inputRadio-items span {
        position: absolute;
        left: 18px;
        top: 1px;
    }

    .clear {
        clear: both;
    }
</style>
<style>

    @media screen and (max-width: 1440px) {
        .content-scrol {
            width: 368px;
            height: 385px;
        }
    }
    @media screen and (min-width: 1450px) {
        .content-scrol {
            width: 368px;
            height: 650px;
        }
    }
    .content-scrol {
        overflow: hidden;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid #cccccc;
        border-radius: 5px;
        box-shadow: 10px #cccccc 10px #cccccc;
        position: relative;
    }

    .content {
        width: 383px;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;


    }
    .content  *{
        overflow: inherit !important;
    }
    .content-title {
        width: 100%;
        position: relative;
        background-color: white;
        border: 10px solid rgba(0, 0, 0, 0.5);


    }

    .ct-textarea {
        width: calc(100% - 20px);
        padding-top: 30px;
        margin-bottom: 50px;
        padding-left: 10px;
        padding-right: 10px;
        outline: none;
    }

    .ct-but {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        position: absolute;
        bottom: 10px;
        left: 136px;

    }

    .null15 {
        width: 100%;
        height: 0px;
    }
    .null50 {
        width: 100%;
        height: 50px;
    }
    .content-img {
        width: 100%;
        height: 250px;
        position: relative;
        background-color: white;
        border: 10px solid rgba(0, 0, 0, 0.5);

    }

    .ci-img {
        width: 200px;
        height: 180px;
        border-radius: 5px;
        position: absolute;
        top: 10px;
        left: 50%;
        margin-left: -100px;
    }

    .ci-del {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        position: absolute;
        bottom: 10px;
        left: 136px;
    }

    .content-p {
        width: 100%;
        position: relative;
        background-color: white;
        border: 10px solid rgba(0, 0, 0, 0.5);

    }

    .cp-textarea {
        width: calc(100% - 20px);
        padding-top: 30px;
        margin-bottom: 50px;
        padding-left: 10px;
        padding-right: 10px;

    }
    .cp-textarea  section{
        width:82px !important;
    }
    .cp-but {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        position: absolute;
        bottom: 10px;
        left: 136px;
    }

    .content-video {
        width: 100%;
        height: 300px;
        position: relative;
        background-color: white;
        border: 10px solid rgba(0, 0, 0, 0.5);

    }

    .cv-video {
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 10px;
        border-radius: 5px;
        width: 300px;
        height: 225px;
    }

    .cv-video video {
        width: 100%;
        height: 100%;
    }

    .cv-video iframe {
        width: 100%;
        height: 100%;
    }

    .cv-but {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        position: absolute;
        bottom: 10px;
        left: 136px;
    }

    .cv-video-none {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 50px;
        right: 0px;
        background: white;
        opacity: 0.5;
    }

    .none {
        display: none !important;
    }

    .content-save {
        color: white;
        text-align: center;
        font-size: 16px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0px;
        height: 40px;
        line-height: 40px;
        background: #39ab67;
        cursor: pointer;
    }
    .null10{
        width: 100%;
        height: 10px;
    }
    #js_content img{
        width: 100% !important
    }
</style>
<style>
    .audio-section  {
        background:  #FDFDFD;
        border:  1px  solid  #F1F1F1;
        position:  relative;
        padding:  15px  16px;
        margin:  13px  0;
    }
    .article-content  *  {
        margin:  0;
        padding:  0;
        max-width:  100%  !important;
        -webkit-box-sizing:  border-box  !important;
        box-sizing:  border-box  !important;
        word-break:  break-all;
        word-wrap:  break-word  !important;
    }
    .audio-text  {
        padding-left:  56px;
        width:  100%;
        height:  100%;
        float:  left;
        -webkit-box-sizing:  border-box;
        box-sizing:  border-box;
        display:  flex;
        flex-direction:  column;
        justify-content:  center;
        align-items:  flex-start;
    }
    .audio-text  p  {
        margin:  0;
    }
    .article-content  p  {
        clear:  both;
        min-height:  1em;
    }
    .audio-name  {
        width:  100%;
        font-size:  15px;
        font-weight:  bold;
        overflow-y:  hidden;
        text-overflow:  ellipsis;
        white-space:  nowrap;
    }
    .audio-duration  {
        width:  100%;
        color:  #A9A9A9;
        font-size:  13px;
    }
    .audio-button  .play  {
        display:  inline-block;
    }
    .audio-button  .pause  {
        display:  none;
    }
    .audio-section:after  {
        content:  '';
        clear:  both;
        display:  block;
        height:  0;
    }

    .audio-button  {
        float:  left;
        margin-left:  -100%;
        display:  flex;
        height:  100%;
        justify-content:  center;
        align-items:  center;
    }
    .audiodiv{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>
<body>

<div class="body-content">
    <input onclick="save()" id="save" type="button" value="保存" style="display: none" class="rrapp-but"/>
    <div id="rrapp">
        <div style="float: left">
            <input type="text" class="form-control" id="text" placeholder="文章链接" style="float:left;width:200px"/>&nbsp;&nbsp;
        </div>
        <div style="float: left">
            <input style="width: 100px" class="form-control" list="source" placeholder="文章类型" id="articleSource">
            <datalist style="line-height: 10px" id="source">
                <option value="普通文章"></option>
                <option value="超V文章"></option>
            </datalist>
        </div>
        &nbsp;&nbsp;
        <button class="rrapp-but" onclick="commit()" style="background-color:#367fa9;border-color: #367fa9;color: #fff">查询</button>
        <input onclick="save()"  type="button" value="保存" class="rrapp-but" style="background-color:#009688;border-color: #009688;color: #fff"/>
        <input onclick='history.go(-1)' type="button" value="返回" class="rrapp-but" style="background-color: #f0ad4e;border-color: #f0ad4e;color: #fff"/>
    </div>
    <div class="null10"></div>
    <div class="inputRadio">
        <!--<div class="inputRadio-items">-->
        <!--<input type="radio" name="Fruit" value="10" />-->
        <!--<span>保险咨询</span>-->
        <!--</div>-->
        <!--<div class="inputRadio-items">-->
        <!--<input type="radio" name="Fruit" value="11" />-->
        <!--<span>保单获客</span>-->
        <!--</div>-->
        <!--<div class="inputRadio-items">-->
        <!--<input type="radio" name="Fruit" value="12" />-->
        <!--<span>保险理念</span>-->
        <!--</div>-->
        <!--<div class="inputRadio-items">-->
        <!--<input type="radio" name="Fruit" value="13" />-->
        <!--<span>保险签单</span>-->
        <!--</div>-->
        <div style="float: left">
            <input list="brandName" placeholder="品牌" id="brandNames" style="width: 100px" class="form-control">
            <datalist id="brandName" style="line-height: 10px">

            </datalist>
        </div>&nbsp;&nbsp;
        <div style="float: left">
            <input type="text" class="form-control" id="hot" placeholder="热度" style="float:left;width:100px"/>
        </div>
        <div class="clear"></div>
    </div>
    <div class="null10"></div>
    <!--<div class="content-save">保存</div>-->
    <div style="display: none" class="content-scrol">
        <div class="content">
            <div class="content-title">
                <div class="ct-textarea" contenteditable="false">
                    修改标题,修改标题,修改标题,修改标题,修改标题,修改标题,修改标题,修改标题,修改标题,修改标题,修改标题
                </div>
                <div class="ct-but">修改标题</div>
            </div>
            <div class="content-section">
                <div class="null15"></div>
                <div class="content-img">
                    <img class="ci-img"
                         src='https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3231897502,2872604692&fm=58&bpow=400&bpoh=256' />
                    <div class="ci-del">删除图片</div>
                    <input class="none" id='ci-img-file'
                           value="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3231897502,2872604692&fm=58&bpow=400&bpoh=256">
                </div>
                <div class="null15"></div>
                <div class="content-p">
                    <div class="cp-textarea" contenteditable="false">
                        删除段落,删除段落,删除段落,删除段落,删除段落,删除段落,删除段落,删除段落,删除段落,删除段落,删除段落
                    </div>
                    <div class="cp-but">删除段落</div>
                </div>
                <div class="null15"></div>
                <div class="content-video">
                    <div class="cv-video-dom">
                        <div class="cv-video">
                            <!-- <iframe src="https://v.qq.com/iframe/preview.html?vid=i0745hd0yxk&amp;width=500&amp;height=375&amp;auto=0"></iframe> -->
                            <video controls="controls">
                                <source src='http://www.w3school.com.cn/i/movie.mp4' type="video/mp4" />
                            </video>
                        </div>

                    </div>

                    <div class="cv-but">删除视频</div>
                </div>
            </div>


            <div class="null50"></div>
            <div class="content-save">保存</div>
        </div>
    </div>
</div>
<div id="content" style=" position:absolute; height:600px; overflow:auto;   border: 1px solid #999;    width: 420px;    padding: 10px"></div>
</body>

</html>

<script>
    $(function () {
        //$(".content-scrol").attr("style", "display:none;");
        var url = location.search;
        if(url!=null && url!="") {
            var articleId = url.split("=")[1];
            $("#rrapp").attr("style", "display:none;");
            $(".inputRadio").attr("style", "display:none;");
            $("#back").attr("style", "display:black;background-color: #f0ad4e;border-color: #f0ad4e;color: #fff");
            showAll(articleId);
        }else{
            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/bbrandinfo/queryAll',
                contentType: "application/json",
                success: function(r){
                    if(r.code==0){
                        vm.bbrandinfo=r.brandInfo;
                        for(i=0;i<r.brandInfo.length;i++){
                            $("#brandName").append(
                                "<option value=" + r.brandInfo[i].brandName +">"+"</option>");
                                //"<option value=" + r.name[i] + "/>");
                        }
                        $("#brandNames").scrollTop()
                    }
                }
            });
        }
        function showAll(e) {
            $.get(baseURL + "sys/barticleinfo/info/"+e, function(r){
                vm.bArticleInfo = r.bArticleInfo;
                console.log(vm.bArticleInfo)
                if(vm.bArticleInfo.articleVersionNum==1) {
                    $(".content-scrol").attr("style", "display:black;");
                    $("#content").attr("style", "display:none;");
                    var obj = {
                        "data": {
                            "articleTitle": vm.bArticleInfo.articleTitle,
                            "articleInfo": r.jsonArray
                        }
                    };
                    domShow(obj);
                    var html = document.getElementById('content').getElementsByTagName('*');
                    for(var i=0;i<html.length;i++){
                        html[i].style.overflow='';
                    }
                }else{
                    var a=vm.bArticleInfo.articleContent;
                    $("#content").html(a);
                    $("#save").attr("style", "display:black;background-color:#009688;border-color: #009688;color: #fff");
                    $(".content-scrol").attr("style", "display:none;");

                    var img = document.getElementsByTagName('img');
                    for(var i = 0;i<img.length;i++){
                        img[i].style.maxwidth= '100%'
                        img[i].parentNode.style=" position:relative; text-align:center;display: block;"
                        var span=document.createElement("span"); //创建元素节点
                        span.style = 'position:absolute;    left: 0;    bottom: 0;    right: 0;    top: 0;    z-index: 0;    background-color: rgba(0,0,0,0);'
                        span.className="imgNew";
                        img[i].parentNode.appendChild(span); // 插入节点
                        console.log(img[i].parentNode.children);
                    }
                    var iframe = document.getElementsByTagName('iframe');
                    for(var i=0;i<iframe.length;i++){
                        iframe[i].parentNode.style=" position:relative; text-align:center;display: block;"
                        var span=document.createElement("span"); //创建元素节点
                        span.style = 'position:absolute;    left: 0;    bottom: 0;    right: 0;    top: 0;    z-index: 0;    background-color: rgba(0,0,0,0);'
                        span.className="iframeNew";
                        iframe[i].parentNode.appendChild(span); // 插入节点
                        console.log(iframe[i].parentNode.children);
                    }
                    var  mpvoice  =  document.getElementsByTagName('mpvoice');
                    if  (mpvoice.length  !==  0)  {
                        for  (var  i  =  0;  i  <  mpvoice.length;  i++)  {

                            if(mpvoice[i].dataset.name){
                                mpvoice[i].parentNode.innerHTML  +=  '<div  class="myvoice"  data-myname="myvoice"><div  clsass="mynamevoice"><div  class="MyAudioContent  article-content  rich_media_content  ">'
                                    +  '<audio  id="js-audio'+i+'"  data-source="https://res.wx.qq.com/voice/getvoice?mediaid='  +  mpvoice[i].dataset.voice_encode_fileid  +  '"  data-name="'  +  mpvoice[i].dataset.name  +  '">'
                                    +  '<source  src="https://res.wx.qq.com/voice/getvoice?mediaid='  +  mpvoice[i].dataset.voice_encode_fileid  +  '"  type="audio/mpeg">'
                                    +  '<source  src="https://res.wx.qq.com/voice/getvoice?mediaid='  +  mpvoice[i].dataset.voice_encode_fileid  +  '"  type="auido/mp3">'
                                    +  '</audio>'
                                    +  '</div>'
                                    +  '<div  id="js-audio-section'+i+'"  class="audio-section"  style="display:  block;"  data-auto="true">'
                                    +  '<div  class="audio-text">'
                                    +  '  <p  id="js-audio-name'+i+'"  class="audio-name">'  +  mpvoice[i].dataset.name  +  '</p>'
                                    +  '<p  id="js-audio-duration'+i+'"  class="audio-duration"></p>'
                                    +  '</div>'
                                    +  '<div  id="js-audio-button'+i+'"  class="audio-button"  >'
                                    +  '<svg  id="js-play'+i+'"  class="play"  width="41"  height="41"  xmlns="http://www.w3.org/2000/svg">'
                                    +  '<g  transform="translate(1  1)"  fill="none"  fill-rule="evenodd">'
                                    +  '<circle  stroke="#F56133"  stroke-width="2"  fill="#FFF"  cx="19.5"  cy="19.5"  r="19.5"/>'
                                    +  '<path  d="M11.664  27.724a53.53  53.53  0  0  1-.006-16.77  2.303  2.303  0  0  1  2.995-1.837c5.823  1.932  10.993  4.755  15.51  8.47a2.297  2.297  0  0  1  .035  3.515c-4.403  3.757-9.591  6.58-15.565  8.468a2.305  2.305  0  0  1-2.97-1.846"  fill="#F56133"/>'
                                    +  '</g>'
                                    +  '  </svg>'
                                    +  '<svg  id="js-pause'+i+'"  class="pause"  width="41"  height="41"  xmlns="http://www.w3.org/2000/svg">'
                                    +  '<g  transform="translate(1  1)"  fill="none"  fill-rule="evenodd">'
                                    +  '<circle  stroke="#F56133"  stroke-width="2"  fill="#FFF"  cx="19.5"  cy="19.5"  r="19.5"/>'
                                    + ' <path d="M13.866 28.971c-1.607 0-3.025-1.43-3.382-3.469a31.696 31.696 0 0 1 0-11.033C10.84 12.43 12.259 11 13.866 11c1.637 0 3.076 1.482 3.398 3.571a35.18 35.18 0 0 1 0 10.83c-.322 2.088-1.761 3.57-3.398 3.57zm11.492 0c-1.607 0-3.025-1.43-3.382-3.469a31.696 31.696 0 0 1 0-11.033C22.333 12.43 23.75 11 25.358 11c1.637 0 3.076 1.482 3.398 3.571a35.18 35.18 0 0 1 0 10.83c-.322 2.088-1.761 3.57-3.398 3.57z" fill="#F56133"/>'
                                    + '</g>'
                                    + ' </svg>'
                                    + '</div>'
                                    + ' </div></div></div>'
                            }
                            // console.log(mpvoice[i])

                            // setTimeout(() => {
                            // audio.setup();
                            var myid = document.getElementById('js-audio-section'+i+'');
                            myid.parentNode.style.position = 'relative';

                            var myhtml = document.createElement('div');
                            myhtml.className='audiodiv';
                            myid.parentNode.appendChild(myhtml);
                            //}, 1000);

                        }

                    }
                    var  qqmusic  =  document.getElementsByTagName('qqmusic');
                    //alert(qqmusic.length)
                    var  arry  =  [];
                    for(var  i=0;i<qqmusic.length;i++){
                        arry.push(qqmusic[i].getAttribute('mid'))
                    }
                    var  midurlinfo=[];
                    var  data  =  {
                        "req":{
                            "module":"CDN.SrfCdnDispatchServer",
                            "method":"GetCdnDispatch",
                            "param":{
                                "guid":"4680094450",
                                "calltype":0,
                                "userip":""
                            }
                        },
                        "req_0":{
                            "module":"vkey.GetVkeyServer",
                            "method":"CgiGetVkey",
                            "param":{
                                "guid":"4680094450",
                                "songmid":arry,
                                "songtype":[0],
                                "uin":"",
                                "loginflag":1,
                                "platform":"20"
                            }
                        },
                        "comm":{
                            "uin":'',
                            "format":"json",
                            "ct":24,
                            "cv":0
                        }
                    }
                    let  url  =  'https://u.y.qq.com/cgi-bin/musicu.fcg?-=getplaysongvkey5750188977044803&g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=0&data='+JSON.stringify(data);
                    $.ajax({
                        url:url,
                        type:"get",
                        dataType:'jsonp',
                        //  jsonp:  "jsonpCallback",
                        scriptCharset:  'GBK',//解决中文乱码
                        success:  function(data){
                            //最新音乐数据
                            data.req_0.data.midurlinfo.forEach((item,index)  =>  {
                                midurlinfo.push(item.purl)
                            })
                            if(qqmusic.length!==0){
                                for(var  i=0;i<parseInt(qqmusic.length);i++){
                                    if(i  <=20){
                                        //  console.log(qqmusic[i])
                                        (function(i){
                                            console.log(i)
                                            //    setTimeout(function(){
                                            //  var  reg  =  /[\u3040-\u309F\u30A0-\u30FF]/;
                                            try  {
                                                var  music_name=  qqmusic[i].getAttribute('music_name');
                                            }  catch  (error)  {
                                                var  music_name=  '其他歌曲'
                                            }
                                            //  console.log('1111===='+JSON.stringify(qqmusic))
                                            //  if(mpvoice[i].dataset.name){
                                            qqmusic[i].parentNode.innerHTML  +='<div  class="myvoice"  data-myname=""><div  clsass="mynamevoice"><div  id="contentAudio"  class="MyAudioContent  article-content  rich_media_content  ">'
                                                +  '<audio  id="js-audio'+i+'"  data-source="http://dl.stream.qqmusic.qq.com/'+midurlinfo[i]+'"  data-name="'  +  music_name  +'">'
                                                +  '<source  src="http://dl.stream.qqmusic.qq.com/'+midurlinfo[i]+'"  type="audio/mp eg">'
                                                +'<source src="http://dl.stream.qqmusic.qq.com/'+midurlinfo[i]+'" type="auido/mp3">'
                                                +'</audio>'
                                                +'</div>'
                                                +'<div id="js-audio-section'+i+'" class="audio-section" style="display: block;" data-auto="true">'
                                                +'<div class="audio-text">'
                                                + ' <p id="js-audio-name'+i+'" class="audio-name">' + music_name +'</p>'
                                                +'<p id="js-audio-duration'+i+'" class="audio-duration"></p>'
                                                +'</div>'
                                                +'<div id="js-audio-button'+i+'" class="audio-button" >'
                                                +'<svg id="js-play'+i+'" class="play" width="41" height="41" xmlns="http://www.w3.org/2000/svg">'
                                                +'<g transform="translate(1 1)" fill="none" fill-rule="evenodd">'
                                                +'<circle stroke="#F56133" stroke-width="2" fill="#FFF" cx="19.5" cy="19.5" r="19.5"/>'
                                                +'<path d="M11.664 27.724a53.53 53.53 0 0 1-.006-16.77 2.303 2.303 0 0 1 2.995-1.837c5.823 1.932 10.993 4.755 15.51 8.47a2.297 2.297 0 0 1 .035 3.515c-4.403 3.757-9.591 6.58-15.565 8.468a2.305 2.305 0 0 1-2.97-1.846" fill="#F56133"/>'
                                                +'</g>'
                                                +' </svg>'
                                                +'<svg id="js-pause'+i+'" class="pause" width="41" height="41" xmlns="http://www.w3.org/2000/svg">'
                                                +'<g transform="translate(1 1)" fill="none" fill-rule="evenodd">'
                                                +'<circle stroke="#F56133" stroke-width="2" fill="#FFF" cx="19.5" cy="19.5" r="19.5"/>'
                                                +' <path d="M13.866 28.971c-1.607 0-3.025-1.43-3.382-3.469a31.696 31.696 0 0 1 0-11.033C10.84 12.43 12.259 11 13.866 11c1.637 0 3.076 1.482 3.398 3.571a35.18 35.18 0 0 1 0 10.83c-.322 2.088-1.761 3.57-3.398 3.57zm11.492 0c-1.607 0-3.025-1.43-3.382-3.469a31.696 31.696 0 0 1 0-11.033C22.333 12.43 23.75 11 25.358 11c1.637 0 3.076 1.482 3.398 3.571a35.18 35.18 0 0 1 0 10.83c-.322 2.088-1.761 3.57-3.398 3.57z" fill="#F56133"/>'
                                                +'</g>'
                                                +' </svg>'
                                                +'</div>'
                                                +' </div></div></div>'
                                            //    },500)
                                            // audio.setup();
                                        })(i)

                                        // }
                                        // console.log(mpvoice[i])

                                        // setTimeout(() => {
                                        // audio.setup();
                                        var myid = document.getElementById('js-audio-section'+i+'');
                                        myid.parentNode.style.position = 'relative';

                                        var myhtml = document.createElement('div');
                                        myhtml.className='audiodiv';
                                        myid.parentNode.appendChild(myhtml);
                                        //  }, 1000);
                                    }
                                }

                            }
                        },
                        error:function (e) {
                            console.log(e);
                        }
                    });
                }
            })
        }
    })
</script>
<script>
    var ChangeType = false;  // '判断是否被点击过了'
    var ChangeBody = '';   // '点击的内容'
    document.getElementById('content').addEventListener("click",function(e){
        //console.log(e) //e.srcElement.parentNode.offsetTop+'===='+ e.srcElement.parentNode.offsetLeft+'----'+e.srcElement.parentNode.offsetHeight
        if(e.target.data=='删除'){ // 防止 点击 删除 按钮 触发 事件 执行删除逻辑
            DeleteNode();
            return false;
        }
        if(e.target.className=="audiodiv"){
            ChangeNode(e);
        }
        if(e.srcElement.previousElementSibling){  // '点击视频或者图片蒙层的 同级节点判断'
            if(e.srcElement.previousElementSibling.localName=='iframe'){ // '判断是否是点击视频'
                console.log('点击视频');
                ChangeNode(e)
            }else if(e.srcElement.previousElementSibling.localName=='img'){ // '判断是否点击图片'
                console.log('点击图片');
                ChangeNode(e)
            }else if(e.srcElement.nodeName=='#text'){
                console.log('text文本')
                ChangeNode(e)
            }
        }else{
            console.log('点击其他段落');
            ChangeNode(e)
        }
        e.preventDefault();
    });

    function ChangeNode(e) {   // '点击获取相应的 dom元素'
        if (e.path.length != 0) {
            for (var i = 0; i < e.path.length; i++) {
                if (e.path[i].className == 'Box') {   //  '同一节点点击两次 删除创建的节点'
                    var idObject = document.getElementById('BoxWapper');
                    if (idObject != null)
                        idObject.parentNode.removeChild(idObject);
                    return false;
                }
            }
        }
        var idObject = document.getElementById('BoxWapper');   // ‘删除已有的节点 创建 新的节点’
        if (idObject != null)
            idObject.parentNode.removeChild(idObject);
        /***区别之前的思路  修改  dom节点   不好控制 下一个点击的 dem节点 还原问题  因此改用 定位 创建弹层 覆盖dom 节点**/
        var div = document.createElement("div"); //创建元素节点
        div.className = 'Box';
        div.id = 'BoxWapper'
        div.style = " background-color: #ffffff;z-index: 1000; position: relative;margin-top: -" + e.srcElement.parentNode.offsetHeight + "px;"
        div.innerHTML = '<div style="border-left: 2px dashed #ff0000;border-right: 2px dashed #ff0000;border-top: 2px dashed #ff0000;padding: 10px;">' + e.srcElement.parentNode.outerHTML + '</div><div style="display:flex;align-items: center;justify-content: center;background: #ff0000;color: #ffffff;font-size: 16px;"><span style="    padding: 5px 10px;" onclick="DeleteNode()">删除</span></div>'
        e.srcElement.parentNode.appendChild(div);
        ChangeBody = e;  // '获取对应的 dom 元素 进行删除等其他操作'
    }
    function DeleteNode(){   // ‘删除dom 元素’
        console.log(ChangeBody)
        var idObject = document.getElementById('BoxWapper');  // '删除创建的节点'
        if (idObject != null)
            idObject.parentNode.removeChild(idObject);

        var child = ChangeBody.srcElement.parentNode;  // ‘删除点击的节点’
        child.parentNode.removeChild(child);
        window.event.preventDefault();
    }
</script>
<script src="${request.contextPath}/statics/js/modules/sys/barticleadd.js"></script>